<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<filedset>
			<legend>商品详情</legend>
			<p>
				<label for="id">编号</label>
				<input type="text" name ="id" id="id" v-model="prod.id">
			</p>
			<p>
				<label for="name">名称</label>
				<input type="text" name ="name" id="name" v-model="prod.name">
			</p>
			<p>
				<label for="price">价格</label>
				<input type="number" name ="price" id="price" v-model="prod.price">
			</p>
			<p>	
				<input type="button" value="保存" class="btn btn-primary" v-on:click="doSave">
			</p>
		</filedset>
		<div class="mui-input-row">
			<label>名称</label>
			<input type="text" placeholder="请输入查询名称关键字" v-model="searchKey">
		</div>
		
		<table class="table">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in searchKeyProdList">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>&yen;{{item.price|priceFormat}}</td>
					<td><input type="button" name="" id="" value="删除" v-on:click="doDelete" class="btn-link "/></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		var vm =new Vue({
			el:"#app",
			
			data:{
				searchKey:'',
				prod:{ id:0,name:'',price:0},
				prodList:[
					{id:0,name:'小米',price:3000},
					{id:1,name:'小米',price:4000},
					{id:2,name:'华为',price:4000}
				]
			},
			computed:{
				searchKeyProdList:function(){
					var self = this;
					return this.prodList.filter(function(item){
						return item.name.indexOf(self.searchKey)!=-1;
					})
				}
			},
			filters:{
				priceFormat:function(priceval){
					return parseFloat(priceval).toFixed(2)+"元";
				}
			},
			methods:{
				doSave:function(){
					this.prodList.push(this.prod);
					console.log(this.prodList);
					//清空文本框
					this.prod={ id:0,name:'',price:0};
				},
				doDelete:function(item){
					var index=this.prodList.indexOf(item);
					this.prodList.splice(index,1);
				}
			}
		})
	</script>
</body>
</html>